<template>
  <div class="scroll">
    <el-breadcrumb class="ml-10px mt-40px" separator="/">
      <el-breadcrumb-item class="font-size-4" :to="{ path: '/subscribe/subscribeList' }">征订管理</el-breadcrumb-item>
      <el-breadcrumb-item>征订列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索 -->
    <div class="screen flex mt-20px ml-10px justify-between flex-items-end">
      <div class="flex flex-1">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">征订标题</span>
              <el-input v-model="formInline.code" class="cell-input" placeholder="请输入征订关键词" clearable />
            </div>
          </el-col>
          <el-col :span="6">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">学校名称</span>
              <el-select
                v-model="formInline.school"
                class="cell-input"
                filterable
                clearable
                placeholder="输入学校关键词"
              >
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">征订类型</span>
              <el-select v-model="formInline.type" class="cell-input" clearable placeholder="全部">
                <el-option label="统购" :value="1" />
                <el-option label="零售" :value="2" />
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">征订状态</span>
              <el-select v-model="formInline.status" class="cell-input" clearable placeholder="全部">
                <el-option label="未开始" :value="1" />
                <el-option label="征订中" :value="2" />
                <el-option label="已截至" :value="3" />
              </el-select>
            </div>
          </el-col>
          <el-col :span="12" class="mt-15px">
            <div class="form-cell form-cell-select flex flex-items-center">
              <span class="font-bold pr-10px" style="min-width: 190px">
                <el-select v-model="formInline.chooseDate" class="cell-input">
                  <el-option label="征订起止时间" :value="1" />
                  <el-option label="信息修改起止时间" :value="2" />
                  <el-option label="商品信息修改起止时间" :value="3" />
                  <el-option label="售后起止时间" :value="4" />
                </el-select>
              </span>
              <el-date-picker
                v-model="formInline.date"
                type="datetimerange"
                class="cell-input-date"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </div>
          </el-col>
        </el-row>
      </div>
      <el-space>
        <el-button size="default" class="small-btn !border-rd-20px" color="#397dfd" plain>重置</el-button>
        <el-button size="default" class="small-btn !border-rd-20px !pl-50px !pr-50px" color="#397dfd" type="primary">
          查询
        </el-button>
        <!-- <div class="reset-btn font-bold">重置</div>
        <div class="search-btn font-bold">查询</div> -->
      </el-space>
    </div>
    <!-- 页面 -->
    <div class="mt-40px pl-10px pr-10px pb-20px bg-white border-rd-10px">
      <el-space class="pb-15px pt-15px">
        <el-dropdown>
          <el-button size="default" class="small-btn" color="#397dfd" type="primary">添加征订</el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleQuickAdd">快速添加</el-dropdown-item>
              <el-dropdown-item @click="handleOpen('add')">常规添加</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <el-button size="default" class="small-btn" color="#397dfd" type="primary" @click="handleDelivery">
          批量配送
        </el-button>
        <el-button size="default" class="small-btn" color="#397dfd" type="primary" @click="handlePayWay">
          批量设置支付方式
        </el-button>
        <el-button size="default" class="small-btn" color="#397dfd" type="primary" @click="handleQrCode">
          批量下载征订码
        </el-button>
      </el-space>
      <el-row :gutter="20" class="gap-row-20px">
        <!-- <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="add flex justify-center flex-items-center">
            <div class="cursor-pointer">
              <el-icon size="80" color="#BDBDBD"><Plus /></el-icon>
              <div class="text-center" style="color: #bdbdbd">添加订单</div>
            </div>
          </div>
        </el-col> -->
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="card flex">
            <div class="tips toward write-vertical-right pl-10px pr-20px text-center">未开始</div>
            <div class="card-content p-10px -ml-10px flex-1">
              <div class="flex flex-items-center justify-between p-5px">
                <el-space class="flex justify-between">
                  <div class="flex flex-items-center">
                    <el-icon size="30" color="#3B82FD"><School /></el-icon>
                    <el-tooltip content="光谷第四初级中学185836" placement="top">
                      <span class="font-bold font-size-14px color-#5E5E69">光谷第四初级中学185836</span>
                    </el-tooltip>
                  </div>
                  <el-tooltip content="复制链接" placement="top">
                    <el-icon class="cursor-pointer" size="20" color="#3B82FD" @click="copyLink"><Connection /></el-icon>
                  </el-tooltip>
                </el-space>
                <div class="font-bold ml-10px">
                  <el-tooltip content="查看二维码" placement="top">
                    <el-icon size="30" @click="handleShowQrcode"><ChatDotSquare /></el-icon>
                  </el-tooltip>
                </div>
              </div>
              <div class="time color-#949494 pt-10px pb-10px">
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订开始时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订截止时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">申请售后截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">修改信息截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
              </div>
              <div class="bar flex flex-items-center justify-between pt-10px pl-10px pr-10px">
                <el-tooltip content="结束征订" placement="top">
                  <el-icon class="cursor-pointer" size="20" @click="handleEditDate"><SwitchButton /></el-icon>
                </el-tooltip>
                <el-tooltip content="编辑" placement="top">
                  <el-icon  class="cursor-pointer" size="20" @click="handleOpen('edit')"><Edit /></el-icon>
                </el-tooltip>
                <el-tooltip content="征订统计" placement="top">
                  <el-icon class="cursor-pointer" size="20"><Histogram /></el-icon>
                </el-tooltip>
                <el-tooltip content="查看更多" placement="top">
                  <el-popover trigger="click">
                    <template #reference>
                      <el-icon class="cursor-pointer" size="20"><MoreFilled /></el-icon>
                    </template>
                    <div>
                      <p class="cursor-pointer" @click="handleProgress">订购流程</p>
                      <p class="cursor-pointer" @click="handleOneDelivery">一键配送</p>
                      <p class="cursor-pointer" @click="handleCustomer">客服配置</p>
                      <p class="cursor-pointer" @click="handlePaySetting">支付配置</p>
                    </div>
                  </el-popover>
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="card flex">
            <div class="tips default write-vertical-right pl-10px pr-20px text-center">已截至</div>
            <div class="card-content p-10px -ml-10px flex-1">
              <div class="flex flex-items-center justify-between p-5px">
                <el-space class="flex justify-between">
                  <div class="flex flex-items-center">
                    <el-icon size="30" color="#3B82FD"><School /></el-icon>
                    <el-tooltip content="光谷第四初级中学185836" placement="top">
                      <span class="font-bold font-size-14px color-#5E5E69">光谷第四初级中学185836</span>
                    </el-tooltip>
                  </div>
                  <el-tooltip content="复制链接" placement="top">
                    <el-icon class="cursor-pointer" size="20" color="#3B82FD" @click="copyLink"><Connection /></el-icon>
                  </el-tooltip>
                </el-space>
                <div class="font-bold ml-10px">
                  <el-tooltip content="查看二维码" placement="top">
                    <el-icon size="30"><ChatDotSquare /></el-icon>
                  </el-tooltip>
                </div>
              </div>
              <div class="time color-#949494 pt-10px pb-10px">
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订开始时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订截止时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">申请售后截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">修改信息截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
              </div>
              <div class="bar flex flex-items-center justify-between pt-10px pl-10px pr-10px">
                <el-tooltip content="结束征订" placement="top">
                  <el-icon size="20"><SwitchButton /></el-icon>
                </el-tooltip>
                <el-tooltip content="编辑" placement="top">
                  <el-icon size="20"><Edit /></el-icon>
                </el-tooltip>
                <el-tooltip content="征订统计" placement="top">
                  <el-icon size="20"><Histogram /></el-icon>
                </el-tooltip>
                <el-tooltip content="查看更多" placement="top">
                  <el-icon size="20"><MoreFilled /></el-icon>
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="card flex">
            <div class="tips write-vertical-right pl-10px pr-20px text-center">进行中</div>
            <div class="card-content p-10px -ml-10px flex-1">
              <div class="flex flex-items-center justify-between p-5px">
                <el-space class="flex justify-between">
                  <div class="flex flex-items-center">
                    <el-icon size="30" color="#3B82FD"><School /></el-icon>
                    <el-tooltip content="光谷第四初级中学185836" placement="top">
                      <span class="font-bold font-size-14px color-#5E5E69">光谷第四初级中学185836</span>
                    </el-tooltip>
                  </div>
                  <el-tooltip content="复制链接" placement="top">
                    <el-icon class="cursor-pointer" size="20" color="#3B82FD"><Connection /></el-icon>
                  </el-tooltip>
                </el-space>
                <div class="font-bold ml-10px">
                  <el-tooltip content="查看二维码" placement="top">
                    <el-icon size="30"><ChatDotSquare /></el-icon>
                  </el-tooltip>
                </div>
              </div>
              <div class="time color-#949494 pt-10px pb-10px">
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订开始时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订截止时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">申请售后截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">修改信息截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
              </div>
              <div class="bar flex flex-items-center justify-between pt-10px pl-10px pr-10px">
                <el-tooltip content="结束征订" placement="top">
                  <el-icon size="20"><SwitchButton /></el-icon>
                </el-tooltip>
                <el-tooltip content="编辑" placement="top">
                  <el-icon size="20"><Edit /></el-icon>
                </el-tooltip>
                <el-tooltip content="征订统计" placement="top">
                  <el-icon size="20"><Histogram /></el-icon>
                </el-tooltip>
                <el-tooltip content="查看更多" placement="top">
                  <el-icon size="20"><MoreFilled /></el-icon>
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="card flex">
            <div class="tips write-vertical-right pl-10px pr-20px text-center">进行中</div>
            <div class="card-content p-10px -ml-10px flex-1">
              <div class="flex flex-items-center justify-between p-5px">
                <el-space class="flex justify-between">
                  <div class="flex flex-items-center">
                    <el-icon size="30" color="#3B82FD"><School /></el-icon>
                    <el-tooltip content="光谷第四初级中学185836" placement="top">
                      <span class="font-bold font-size-14px color-#5E5E69">光谷第四初级中学185836</span>
                    </el-tooltip>
                  </div>
                  <el-tooltip content="复制链接" placement="top">
                    <el-icon class="cursor-pointer" size="20" color="#3B82FD"><Connection /></el-icon>
                  </el-tooltip>
                </el-space>
                <div class="font-bold ml-10px">
                  <el-tooltip content="查看二维码" placement="top">
                    <el-icon size="30"><ChatDotSquare /></el-icon>
                  </el-tooltip>
                </div>
              </div>
              <div class="time color-#949494 pt-10px pb-10px">
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订开始时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订截止时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">申请售后截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">修改信息截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
              </div>
              <div class="bar flex flex-items-center justify-between pt-10px pl-10px pr-10px">
                <el-tooltip content="结束征订" placement="top">
                  <el-icon size="20"><SwitchButton /></el-icon>
                </el-tooltip>
                <el-tooltip content="编辑" placement="top">
                  <el-icon size="20"><Edit /></el-icon>
                </el-tooltip>
                <el-tooltip content="征订统计" placement="top">
                  <el-icon size="20"><Histogram /></el-icon>
                </el-tooltip>
                <el-tooltip content="查看更多" placement="top">
                  <el-icon size="20"><MoreFilled /></el-icon>
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="card flex">
            <div class="tips write-vertical-right pl-10px pr-20px text-center">进行中</div>
            <div class="card-content p-10px -ml-10px flex-1">
              <div class="flex flex-items-center justify-between p-5px">
                <el-space class="flex justify-between">
                  <div class="flex flex-items-center">
                    <el-icon size="30" color="#3B82FD"><School /></el-icon>
                    <el-tooltip content="光谷第四初级中学185836" placement="top">
                      <span class="font-bold font-size-14px color-#5E5E69">光谷第四初级中学185836</span>
                    </el-tooltip>
                  </div>
                  <el-tooltip content="复制链接" placement="top">
                    <el-icon class="cursor-pointer" size="20" color="#3B82FD"><Connection /></el-icon>
                  </el-tooltip>
                </el-space>
                <div class="font-bold ml-10px">
                  <el-tooltip content="查看二维码" placement="top">
                    <el-icon size="30"><ChatDotSquare /></el-icon>
                  </el-tooltip>
                </div>
              </div>
              <div class="time color-#949494 pt-10px pb-10px">
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订开始时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订截止时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">申请售后截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">修改信息截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
              </div>
              <div class="bar flex flex-items-center justify-between pt-10px pl-10px pr-10px">
                <el-tooltip content="结束征订" placement="top">
                  <el-icon size="20"><SwitchButton /></el-icon>
                </el-tooltip>
                <el-tooltip content="编辑" placement="top">
                  <el-icon size="20"><Edit /></el-icon>
                </el-tooltip>
                <el-tooltip content="征订统计" placement="top">
                  <el-icon size="20"><Histogram /></el-icon>
                </el-tooltip>
                <el-tooltip content="查看更多" placement="top">
                  <el-icon size="20"><MoreFilled /></el-icon>
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="card flex">
            <div class="tips write-vertical-right pl-10px pr-20px text-center">进行中</div>
            <div class="card-content p-10px -ml-10px flex-1">
              <div class="flex flex-items-center justify-between p-5px">
                <el-space class="flex justify-between">
                  <div class="flex flex-items-center">
                    <el-icon size="30" color="#3B82FD"><School /></el-icon>
                    <el-tooltip content="光谷第四初级中学185836" placement="top">
                      <span class="font-bold font-size-14px color-#5E5E69">光谷第四初级中学185836</span>
                    </el-tooltip>
                  </div>
                  <el-tooltip content="复制链接" placement="top">
                    <el-icon class="cursor-pointer" size="20" color="#3B82FD"><Connection /></el-icon>
                  </el-tooltip>
                </el-space>
                <div class="font-bold ml-10px">
                  <el-tooltip content="查看二维码" placement="top">
                    <el-icon size="30"><ChatDotSquare /></el-icon>
                  </el-tooltip>
                </div>
              </div>
              <div class="time color-#949494 pt-10px pb-10px">
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订开始时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订截止时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">申请售后截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">修改信息截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
              </div>
              <div class="bar flex flex-items-center justify-between pt-10px pl-10px pr-10px">
                <el-tooltip content="结束征订" placement="top">
                  <el-icon size="20"><SwitchButton /></el-icon>
                </el-tooltip>
                <el-tooltip content="编辑" placement="top">
                  <el-icon size="20"><Edit /></el-icon>
                </el-tooltip>
                <el-tooltip content="征订统计" placement="top">
                  <el-icon size="20"><Histogram /></el-icon>
                </el-tooltip>
                <el-tooltip content="查看更多" placement="top">
                  <el-icon size="20"><MoreFilled /></el-icon>
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="card flex">
            <div class="tips toward write-vertical-right pl-10px pr-20px text-center">进行中</div>
            <div class="card-content p-10px -ml-10px flex-1">
              <div class="flex flex-items-center justify-between p-5px">
                <el-space class="flex justify-between">
                  <div class="flex flex-items-center">
                    <el-icon size="30" color="#3B82FD"><School /></el-icon>
                    <el-tooltip content="光谷第四初级中学185836" placement="top">
                      <span class="font-bold font-size-14px color-#5E5E69">光谷第四初级中学185836</span>
                    </el-tooltip>
                  </div>
                  <el-tooltip content="复制链接" placement="top">
                    <el-icon class="cursor-pointer" size="20" color="#3B82FD"><Connection /></el-icon>
                  </el-tooltip>
                </el-space>
                <div class="font-bold ml-10px">
                  <el-tooltip content="查看二维码" placement="top">
                    <el-icon size="30"><ChatDotSquare /></el-icon>
                  </el-tooltip>
                </div>
              </div>
              <div class="time color-#949494 pt-10px pb-10px">
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订开始时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订截止时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">申请售后截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">修改信息截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
              </div>
              <div class="bar flex flex-items-center justify-between pt-10px pl-10px pr-10px">
                <el-tooltip content="结束征订" placement="top">
                  <el-icon size="20"><SwitchButton /></el-icon>
                </el-tooltip>
                <el-tooltip content="编辑" placement="top">
                  <el-icon size="20"><Edit /></el-icon>
                </el-tooltip>
                <el-tooltip content="征订统计" placement="top">
                  <el-icon size="20"><Histogram /></el-icon>
                </el-tooltip>
                <el-tooltip content="查看更多" placement="top">
                  <el-icon size="20"><MoreFilled /></el-icon>
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="card flex">
            <div class="tips write-vertical-right pl-10px pr-20px text-center">进行中</div>
            <div class="card-content p-10px -ml-10px flex-1">
              <div class="flex flex-items-center justify-between p-5px">
                <el-space class="flex justify-between">
                  <div class="flex flex-items-center">
                    <el-icon size="30" color="#3B82FD"><School /></el-icon>
                    <el-tooltip content="光谷第四初级中学185836" placement="top">
                      <span class="font-bold font-size-14px color-#5E5E69">光谷第四初级中学185836</span>
                    </el-tooltip>
                  </div>
                  <el-tooltip content="复制链接" placement="top">
                    <el-icon class="cursor-pointer" size="20" color="#3B82FD"><Connection /></el-icon>
                  </el-tooltip>
                </el-space>
                <div class="font-bold ml-10px">
                  <el-tooltip content="查看二维码" placement="top">
                    <el-icon size="30"><ChatDotSquare /></el-icon>
                  </el-tooltip>
                </div>
              </div>
              <div class="time color-#949494 pt-10px pb-10px">
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订开始时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订截止时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">申请售后截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">修改信息截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
              </div>
              <div class="bar flex flex-items-center justify-between pt-10px pl-10px pr-10px">
                <el-tooltip content="结束征订" placement="top">
                  <el-icon size="20"><SwitchButton /></el-icon>
                </el-tooltip>
                <el-tooltip content="编辑" placement="top">
                  <el-icon size="20"><Edit /></el-icon>
                </el-tooltip>
                <el-tooltip content="征订统计" placement="top">
                  <el-icon size="20"><Histogram /></el-icon>
                </el-tooltip>
                <el-tooltip content="查看更多" placement="top">
                  <el-icon size="20"><MoreFilled /></el-icon>
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="card flex">
            <div class="tips write-vertical-right pl-10px pr-20px text-center">进行中</div>
            <div class="card-content p-10px -ml-10px flex-1">
              <div class="flex flex-items-center justify-between p-5px">
                <el-space class="flex justify-between">
                  <div class="flex flex-items-center">
                    <el-icon size="30" color="#3B82FD"><School /></el-icon>
                    <el-tooltip content="光谷第四初级中学185836" placement="top">
                      <span class="font-bold font-size-14px color-#5E5E69">光谷第四初级中学185836</span>
                    </el-tooltip>
                  </div>
                  <el-tooltip content="复制链接" placement="top">
                    <el-icon class="cursor-pointer" size="20" color="#3B82FD"><Connection /></el-icon>
                  </el-tooltip>
                </el-space>
                <div class="font-bold ml-10px">
                  <el-tooltip content="查看二维码" placement="top">
                    <el-icon size="30"><ChatDotSquare /></el-icon>
                  </el-tooltip>
                </div>
              </div>
              <div class="time color-#949494 pt-10px pb-10px">
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订开始时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订截止时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">申请售后截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">修改信息截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
              </div>
              <div class="bar flex flex-items-center justify-between pt-10px pl-10px pr-10px">
                <el-tooltip content="结束征订" placement="top">
                  <el-icon size="20"><SwitchButton /></el-icon>
                </el-tooltip>
                <el-tooltip content="编辑" placement="top">
                  <el-icon size="20"><Edit /></el-icon>
                </el-tooltip>
                <el-tooltip content="征订统计" placement="top">
                  <el-icon size="20"><Histogram /></el-icon>
                </el-tooltip>
                <el-tooltip content="查看更多" placement="top">
                  <el-icon size="20"><MoreFilled /></el-icon>
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <div class="card flex">
            <div class="tips write-vertical-right pl-10px pr-20px text-center">进行中</div>
            <div class="card-content p-10px -ml-10px flex-1">
              <div class="flex flex-items-center justify-between p-5px">
                <el-space class="flex justify-between">
                  <div class="flex flex-items-center">
                    <el-icon size="30" color="#3B82FD"><School /></el-icon>
                    <el-tooltip content="光谷第四初级中学185836" placement="top">
                      <span class="font-bold font-size-14px color-#5E5E69">光谷第四初级中学185836</span>
                    </el-tooltip>
                  </div>
                  <el-tooltip content="复制链接" placement="top">
                    <el-icon class="cursor-pointer" size="20" color="#3B82FD"><Connection /></el-icon>
                  </el-tooltip>
                </el-space>
                <div class="font-bold ml-10px">
                  <el-tooltip content="查看二维码" placement="top">
                    <el-icon size="30"><ChatDotSquare /></el-icon>
                  </el-tooltip>
                </div>
              </div>
              <div class="time color-#949494 pt-10px pb-10px">
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订开始时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">征订截止时间</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">申请售后截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
                <div class="flex justify-between">
                  <span class="line-height-32px flex-1">修改信息截止</span>
                  <span class="line-height-32px whitespace-nowrap overflow-hidden text-ellipsis max-w-50%">
                    2024-05-01 00:00:00
                  </span>
                </div>
              </div>
              <div class="bar flex flex-items-center justify-between pt-10px pl-10px pr-10px">
                <el-tooltip content="结束征订" placement="top">
                  <el-icon size="20"><SwitchButton /></el-icon>
                </el-tooltip>
                <el-tooltip content="编辑" placement="top">
                  <el-icon size="20"><Edit /></el-icon>
                </el-tooltip>
                <el-tooltip content="征订统计" placement="top">
                  <el-icon size="20"><Histogram /></el-icon>
                </el-tooltip>
                <el-tooltip content="查看更多" placement="top">
                  <el-icon size="20"><MoreFilled /></el-icon>
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="flex justify-center pt-60px">
        <el-pagination
          v-model:current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout="sizes, prev, pager, next"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 查看二维码 -->
    <el-dialog
      v-model="dialogTableVisible"
      align-center
      class="!bg-transparent !shadow-none"
      :show-close="false"
      width="460"
    >
      <img
        src="https://interest-1.oss-cn-shenzhen.aliyuncs.com/zhengDingQrCode/15134082e41236c91d436c99dc2f08f5c67e31.jpg"
        class="model-img"
        style="width: 100%"
      />
    </el-dialog>
    <!-- 快速添加 -->
    <QuickAddModel ref="quickAddModelRef" />
    <!-- 常规添加 -->
    <!-- 批量配送 -->
    <DeliveryModel ref="deliveryModelRef" />
    <!-- 批量支付方式 -->
    <PayWayModel ref="PayWayModelRef" />
    <!-- 批量下载征订码 -->
    <QrCodeModel ref="QrCodeModelRef" />
    \
    <!-- 结束开始征订 -->
    <EditDateModel ref="EditDateModelRef" />
    <!-- 一键配送 -->
    <OneDeliveryModel ref="oneDeliveryModelRef" />
    <!-- 客服配置 -->
    <CustomerModel ref="customerModelRef" />
    <!-- 支付配置 -->
    <PaySettingModel ref="paySettingModelRef" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import QuickAddModel from './components/quickAddModel.vue'
import DeliveryModel from './components/deliveryModel.vue'
import PayWayModel from './components/payWayModel.vue'
import QrCodeModel from './components/qrCodeModel.vue'
import EditDateModel from './components/editDateModel.vue'
import OneDeliveryModel from './components/oneDeliveryModel.vue'
import CustomerModel from './components/customerModel.vue'
import PaySettingModel from './components/paySettingModel.vue'
const router = useRouter()
const formInline = reactive({
  code: '',
  school: '',
  type: '',
  status: '',
  chooseDate: 1,
  date: ''
})
const options = reactive([
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
])
const currentPage = ref(5)
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
}
// 拷贝
const copyLink = () => {
  copyValueToClipboard('测试', '复制征订链接成功!')
}
// 查看二维码
const dialogTableVisible = ref(false)
const handleShowQrcode = () => {
  dialogTableVisible.value = true
}
// 快速添加
const quickAddModelRef = ref(null)
const handleQuickAdd = () => {
  // console.log(quickAddModelRef.value)
  quickAddModelRef.value.show(true)
}
// 常规添加
const handleOpen = (val) => {
  router.push({path:'/subscribe/generalAddModel',query:{title:val}})
}
// 批量配送
const deliveryModelRef = ref(null)
const handleDelivery = () => {
  deliveryModelRef.value.show(true)
}
// 批量支付方式
const PayWayModelRef = ref(null)
const handlePayWay = () => {
  PayWayModelRef.value.show(true)
}
// 批量下载征订码
const QrCodeModelRef = ref(null)
const handleQrCode = () => {
  QrCodeModelRef.value.show(true)
}
// 修改征订时间
const EditDateModelRef = ref(null)
const handleEditDate = () => {
  EditDateModelRef.value.show(true)
}
// 订购流程
const handleProgress = () => {
  window.open(
    'https://mall-admin.interest88.com/#/oms/zhengDingSetting/guidance?id=15135&appid=a83fe5a9ed6f4222ba04304aa3eecf54',
    '_blank'
  )
}
// 一键配送
const oneDeliveryModelRef = ref(null)
const handleOneDelivery = () => {
  oneDeliveryModelRef.value.show(true)
}
// 客服配置
const customerModelRef = ref(null)
const handleCustomer = () => {
  customerModelRef.value.show(true)
}
// 支付配置
const paySettingModelRef = ref(null)
const handlePaySetting = () => {
  paySettingModelRef.value.show(true)
}
</script>

<style scoped lang="scss">
.screen {
  :deep(.el-input__wrapper) {
    box-shadow: none !important;
    padding: 1px 8px !important;
    border-radius: 20px;
  }
  :deep(.el-select__wrapper) {
    box-shadow: none !important;
    padding: 8px !important;
    border-radius: 20px;
  }
}

.add {
  height: 100%;
  background: #ececec;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
}
.card {
  .tips {
    background: linear-gradient(to top, #ffb257, #ff954f);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    border-radius: 20px 0 0 20px;
    color: #fff;
  }
  .toward {
    background: linear-gradient(to top, #33b0fc, #3b82fd);
  }
  .default {
    background: #9e9e9e;
  }
  .time {
    border-top: 1px solid #c7c7cd;
    border-bottom: 1px solid #c7c7cd;
  }
  .card-content {
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px 20px 20px 10px;
    border: 1px solid #ffffff;
  }
}
</style>
